<template>
  <button
    :class="classArr"
    size="mini"
    :type="buttonType"
    :style="buttonCssStyle"
    :disabled="state.disabled"
    @click="handleButtonClick"
  >
    <view :class="ns.b('content')">
      <i-biz-icon :class="ns.bm('content', 'icon')" :icon="sysImage" />
      <view :class="ns.bm('content', 'caption')">
        {{ showCaption ? captionText : null }}
      </view>
    </view>
  </button>
</template>
<script lang="ts">
export default {
  options: {
    addGlobalClass: true,
    virtualHost: true,
    styleIsolation: "shared"
  }
}
</script>
<script setup lang="ts">
import { useNamespace } from "@/use";
import { IPanelButton } from "@ibiz/model-core";
import { computed, PropType } from "vue";
import { PanelButtonController } from "./i-biz-panel-button.controller";
const props = defineProps({
  modelData: {
    type: Object as PropType<IPanelButton>,
    required: true,
  },
  controller: {
    type: PanelButtonController,
    required: true,
  },
});
const ns = useNamespace("panel-button");

const {
  caption,
  captionItemName,
  renderMode,
  itemStyle,
  showCaption,
  sysImage,
  codeName,
  buttonCssStyle,
} = props.modelData;

const { panel, state } = props.controller;
const { id } = props.modelData;

const captionText = computed(() => {
  if (captionItemName && panel.data) {
    return panel.data[captionItemName];
  }
  return caption;
});

const buttonType = computed(() => {
  if (Object.is(renderMode, "LINK")) {
    return "text";
  }
  if (["PRIMARY", "SUCCESS", "INFO", "WARNING", "DANGER"].includes(itemStyle)) {
    return itemStyle.toLowerCase();
  }
  return "default";
});

const handleButtonClick = (event: MouseEvent) => {
  props.controller.onActionClick(event);
};
// 类名控制
const classArr = computed(() => {
  const result: Array<string | false> = [ns.b(), ns.m(id)];
  if (props.controller) {
    result.push(
      ns.b(),
      ns.m(codeName),
      ns.is("hidden", !props.controller.state.visible),
      ...props.controller.containerClass
    );
  }
  return result;
});
</script>
<style lang="scss">
@import "./i-biz-panel-button.scss";
</style>
